import React, { memo, useEffect, useState } from "react";
import { View } from '@tarojs/components'
import Taro, { useRouter } from '@tarojs/taro'
import { formatDate } from "@/utils/fomatter";
import { useDispatch } from "react-redux";

import './index.scss'


function ObsPoolList() {
  let router = useRouter()
  const dispatch = useDispatch()

  const [poolItem, setPoolItem] = useState({ poolName: '', reportList: [] })

  useEffect(() => {
    let data = { poolName: '' }
    if (router.params.data) {
      data = JSON.parse(decodeURIComponent(router.params?.data))
    }


    setPoolItem(data)
    let title = data?.poolName
    Taro.setNavigationBarTitle({
      title: title
    })
  }, [])

  const goReportDetail = (item) => {
    dispatch({
      type: 'obsPool/save',
      payload: {
        reportDetail: { zz500Model: {}, hs300Model: {}, otherList: [] },
      }
    })
    Taro.navigateTo({
      url: '/obsPoolDetail/reportDetail/index?data=' + `${encodeURIComponent(JSON.stringify(item))}`
    })
  }
  return (
    <View className='body'>
      <View className='pool-list'>
        {
          poolItem!.reportList.length ?
            poolItem.reportList.map((item, index) => {
              return (
                <View
                  key={item.reportId}
                  className='pool-item'
                  style={{ borderBottom: index == poolItem.reportList.length - 1 ? 'none' : '' }}
                  onClick={() => goReportDetail(item)}
                >
                  <View className='item-title text3'>{formatDate(item.netDate?.toString(), 'string', 'YYYY年MM月')} | {item.reportName}</View>
                  <View className='item-date'>净值日期 {formatDate(item.netDate?.toString(), 'string', 'MM-DD')}</View>
                </View>
              )
            })

            : null

        }



      </View>
    </View>



  )
}

export default memo(ObsPoolList)
